<template>
  <div>
    <van-search v-model="value" show-action placeholder="请输入搜索关键词">
      <template #left>
        <div @click="onClickButtonleft">
          <van-icon name="arrow-left" size="20" />
        </div>
      </template>
      <template #action>
        <div @click="godel(value)">搜索</div>
      </template>
    </van-search>
    <div>
      <div class="bgc" v-show="flag">
        <p>搜索历史</p>
        <span>
          <van-tag
            v-for="item in hotList"
            :key="item"
            color="#ffe1e1"
            text-color="#ad0000"
            @click="godel(item.keyword)"
            >{{ item.keyword }}</van-tag
          >
        </span>
      </div>

      <div class="bgc" v-show="flag">
        <p>热门搜索</p>
        <span>
          <van-tag
            v-for="item in hotList"
            :key="item"
            color="#ffe1e1"
            text-color="#ad0000"
            @click="godel(item.keyword)"
            >{{ item.keyword }}</van-tag
          >
        </span>
      </div>
      <div>
        <ul>
          <li v-for="item in list" :key="item">
            <RouterLink :to="'/details/' + item.proid">
              <img :src="item.img1" alt="" />
              <p>{{ item.proname }}</p>
              <span>￥{{ item.originprice }}</span>
            </RouterLink>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getHotWord, getSearch } from "../../server/search";
import { ref, type Ref, onMounted } from "vue";
let value = ref<any>("");
let list = ref<any>([]);
let hotList = ref<any>([]);
let flag = ref<boolean>(true);
let count = ref<number>(1);
let limitNum = ref<number>(10);
onMounted(() => {
  gethot();
});
function onClickButtonleft() {
  history.back();
}
//获取热门推荐商品类
function gethot() {
  getHotWord().then((res: any) => {
    console.log(res);
    if (res.code === "200") {
      hotList.value = res.data;
    }
  });
}
//点击查看商品详情

function godel(keyword: any) {
  value.value = keyword;
  getSearch(count.value, limitNum.value, value.value).then((res: any) => {
    if (res.code === "200") {
      console.log(res);
      list.value = list.value.concat(res.data);
      //更改标签盒子是否可见
      flag.value = false;
    }
  });
}
</script>

<style lang="scss" scoped>
span {
  margin: 10px;
}
.bgc {
  background-color: #f5f5f5;
}
p {
  font-size: 14px;
}

ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    img {
      display: block;
      width: 100%;
    }
    p {
      font-size: 16px;
      overflow: hidden; /*文本超出隐藏*/
      display: -webkit-box; /*盒子模型微弹性伸缩模型*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
      -webkit-line-clamp: 1; /*文本显示3行*/
    }
    span {
      color: red;
      font-size: 16px;
    }
  }
}
a {
  color: black;
}
</style>
